<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../element/element.css">
  <script src="../../element/vue.js"></script>
  <script src="../../element/index.js"></script>
  <script src="../../js/axios.min.js"></script>

  <title>积分表</title>
</head>

<body>
  <div id="app">
    <el-table :data="pointsList" style="width: 100%" @selection-change="onSelectionChange">
      <!-- 选择列 -->
      <el-table-column type="selection"></el-table-column>

      <!-- 其他列 -->
      <el-table-column prop="pointsRulesId" label="ID"></el-table-column>
      <el-table-column prop="ruleTitle" label="标题"></el-table-column>
      <el-table-column prop="pointsValue" label="分值"></el-table-column>
      <el-table-column prop="details" label="具体描述"></el-table-column>
    </el-table>

    <!-- 提交按钮 -->
    <el-button type="primary" @click="handleSubmit">提交</el-button>

    <!-- 总分 -->
    <p>总分: {{ totalPoints }}</p>
  </div>

  <script>

    new Vue({
      el: '#app',
      data() {
        return {
          pointsList: [], // 积分列表数据
          selectedRows: [], // 选择的行数据
          totalPoints: 0 // 总分
        };
      },
      created() {

        this.search(); // 页面加载时自动触发查询
      },
      watch: {
        selectedRows: {

          handler: function (newRows, oldRows) {
            this.totalPoints = 0; // 每次选择发生变化时先重置总分
            newRows.forEach(row => {
              this.totalPoints += row.pointsValue;
            });
          },
          deep: true // 深度监听数组内部对象的变化
        }
      },
      methods: {
        search() {
          axios.get('http://localhost:8888/api/donation/getPoints', {
            params: {
              pointsId: 1// 替换为实际的pointsId值
            }
          })
            .then(response => {
              const result = response.data;
              if (result.code === 0) {
                console.log(result.data)
                this.pointsList = result.data;
              } else {
                console.error(result.message);
                console.log("查询失败");
              }
            })
            .catch(error => {
              console.error(error);
              // 处理错误的逻辑...
            });
        },
        handleSubmit() {
          const selectedIds = this.selectedRows.map(row => row.pointsRulesId);
          const params = {
            donationId: '1',
            isPointsRules: selectedIds.join(',')
          };

          axios.post('http://localhost:8888/api/donation/setPointsRule', params)
            .then(response => {
              // 请求成功处理逻辑
              const { code, message, data } = response.data;
              if (code === 0) {
                console.log(message);
                console.log(data);
              } else {
                console.error('请求失败');
              }
            })
            .catch(error => {
              // 请求失败处理逻辑
              console.error('请求出错', error);
            });
        },
        // 选择行发生变化时触发
        onSelectionChange(rows) {

          this.selectedRows = rows; // 将选中的行数据赋值给 selectedRows 变量
          this.totalPoints = 0; // 每次选择发生变化时先重置总分
          this.selectedRows.forEach(row => {
            this.totalPoints += row.pointsValue;
          });
        }
      }
    });

  </script>
</body>

</html>